<template>
    <view class="container">
        <!-- 设备信息 -->
        <view class="device-info" v-if="deviceInfo">
            <view class="info-row">
                <text class="label">设备编号：</text>
                <text class="value">{{ deviceInfo.deviceNo }}</text>
            </view>
            <view class="info-row">
                <text class="label">所在医院：</text>
                <text class="value">{{ deviceInfo.hospitalName }}</text>
            </view>
            <view class="info-row">
                <text class="label">所在科室：</text>
                <text class="value">{{ deviceInfo.departmentName }}</text>
            </view>
            <view class="info-row">
                <text class="label">床位号：</text>
                <text class="value">{{ deviceInfo.bedNo }}</text>
            </view>
        </view>

        <!-- 故障类型 -->
        <view class="form-section">
            <view class="section-title">故障类型</view>
            <view class="fault-types">
                <view 
                    v-for="(item, index) in faultTypes" 
                    :key="index"
                    class="fault-item"
                    :class="{ active: selectedFault === index }"
                    @tap="selectFault(index)"
                >
                    {{ item }}
                </view>
            </view>
        </view>

        <!-- 故障描述 -->
        <view class="form-section">
            <view class="section-title">故障描述</view>
            <textarea 
                class="fault-desc"
                v-model="faultDesc"
                placeholder="请详细描述遇到的问题，以便我们更好地解决"
                maxlength="500"
            ></textarea>
            <view class="word-count">{{ faultDesc.length }}/500</view>
        </view>

        <!-- 图片上传 -->
        <view class="form-section">
            <view class="section-title">
                <text>图片上传</text>
                <text class="subtitle">（最多3张，可选）</text>
            </view>
            <view class="upload-images">
                <view 
                    class="image-item" 
                    v-for="(item, index) in uploadImages" 
                    :key="index"
                >
                    <image :src="item" mode="aspectFill" @tap="previewImage(index)"></image>
                    <view class="delete-btn" @tap.stop="deleteImage(index)">×</view>
                </view>
                <view class="upload-btn" @tap="chooseImage" v-if="uploadImages.length < 3">
                    <image src="/static/images/upload.png"></image>
                    <text>上传图片</text>
                </view>
            </view>
        </view>

        <!-- 联系方式 -->
        <view class="form-section">
            <view class="section-title">联系方式</view>
            <view class="contact-input">
                <input 
                    type="number" 
                    v-model="contactPhone"
                    placeholder="请输入手机号码"
                    maxlength="11"
                />
            </view>
        </view>

        <!-- 提交按钮 -->
        <view class="submit-section">
            <button 
                class="submit-btn" 
                :disabled="!isValid"
                :loading="submitting"
                @tap="handleSubmit"
            >
                提交反馈
            </button>
        </view>

        <!-- 提示 -->
        <view class="tips">
            <view class="tip-item">* 我们将在24小时内处理您的反馈</view>
            <view class="tip-item">* 处理结果将通过消息通知您</view>
        </view>
    </view>
</template>

<script>
import { submitFault } from '@/api/feedback'
import { getDeviceDetail } from '@/api/device'

export default {
    data() {
        return {
            deviceInfo: null,
            faultTypes: ['无法开锁', '无法关锁', '设备损坏', '其他问题'],
            selectedFault: -1,
            faultDesc: '',
            uploadImages: [],
            contactPhone: '',
            submitting: false
        }
    },
    computed: {
        isValid() {
            return this.selectedFault !== -1 && 
                   this.faultDesc.trim() !== '' && 
                   /^1[3-9]\d{9}$/.test(this.contactPhone)
        }
    },
    onLoad(options) {
        if (options.deviceNo) {
            this.getDeviceInfo(options.deviceNo)
        }
    },
    methods: {
        // 获取设备信息
        async getDeviceInfo(deviceNo) {
            try {
                const res = await getDeviceDetail(deviceNo)
                this.deviceInfo = res
            } catch (error) {
                uni.showToast({
                    title: '获取设备信息失败',
                    icon: 'none'
                })
            }
        },
        
        // 选择故障类型
        selectFault(index) {
            this.selectedFault = index
        },
        
        // 选择图片
        async chooseImage() {
            try {
                const res = await uni.chooseImage({
                    count: 3 - this.uploadImages.length,
                    sizeType: ['compressed'],
                    sourceType: ['album', 'camera']
                })
                
                // 上传图片
                for (let tempFile of res.tempFilePaths) {
                    const uploadRes = await this.uploadFile(tempFile)
                    this.uploadImages.push(uploadRes.url)
                }
            } catch (error) {
                if (error.errMsg !== 'chooseImage:fail cancel') {
                    uni.showToast({
                        title: '选择图片失败',
                        icon: 'none'
                    })
                }
            }
        },
        
        // 上传文件
        uploadFile(filePath) {
            return new Promise((resolve, reject) => {
                uni.uploadFile({
                    url: '/api/upload',
                    filePath: filePath,
                    name: 'file',
                    success: (res) => {
                        const data = JSON.parse(res.data)
                        if (data.code === 0) {
                            resolve(data.data)
                        } else {
                            reject(new Error(data.msg))
                        }
                    },
                    fail: reject
                })
            })
        },
        
        // 预览图片
        previewImage(index) {
            uni.previewImage({
                urls: this.uploadImages,
                current: index
            })
        },
        
        // 删除图片
        deleteImage(index) {
            this.uploadImages.splice(index, 1)
        },
        
        // 提交反馈
        async handleSubmit() {
            if (!this.isValid || this.submitting) return
            
            try {
                this.submitting = true
                await submitFault({
                    deviceNo: this.deviceInfo?.deviceNo,
                    faultType: this.selectedFault,
                    faultDesc: this.faultDesc,
                    images: this.uploadImages,
                    contactPhone: this.contactPhone
                })
                
                uni.showToast({
                    title: '提交成功',
                    icon: 'success'
                })
                
                setTimeout(() => {
                    uni.navigateBack()
                }, 1500)
            } catch (error) {
                uni.showToast({
                    title: error.message || '提交失败',
                    icon: 'none'
                })
            } finally {
                this.submitting = false
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.container {
    min-height: 100vh;
    background-color: #f5f5f5;
    padding: 20rpx;
    
    .device-info {
        background-color: #fff;
        border-radius: 12rpx;
        padding: 30rpx;
        margin-bottom: 20rpx;
        
        .info-row {
            display: flex;
            margin-bottom: 20rpx;
            
            &:last-child {
                margin-bottom: 0;
            }
            
            .label {
                width: 160rpx;
                color: #666;
                font-size: 28rpx;
            }
            
            .value {
                flex: 1;
                color: #333;
                font-size: 28rpx;
            }
        }
    }
    
    .form-section {
        background-color: #fff;
        border-radius: 12rpx;
        padding: 30rpx;
        margin-bottom: 20rpx;
        
        .section-title {
            font-size: 32rpx;
            font-weight: bold;
            color: #333;
            margin-bottom: 20rpx;
            
            .subtitle {
                font-size: 24rpx;
                color: #999;
                font-weight: normal;
                margin-left: 10rpx;
            }
        }
        
        .fault-types {
            display: flex;
            flex-wrap: wrap;
            gap: 20rpx;
            
            .fault-item {
                padding: 20rpx 40rpx;
                background: #f5f5f5;
                border-radius: 30rpx;
                font-size: 28rpx;
                color: #666;
                
                &.active {
                    background: #07c160;
                    color: #fff;
                }
            }
        }
        
        .fault-desc {
            width: 100%;
            height: 300rpx;
            background: #f5f5f5;
            border-radius: 12rpx;
            padding: 20rpx;
            font-size: 28rpx;
        }
        
        .word-count {
            text-align: right;
            font-size: 24rpx;
            color: #999;
            margin-top: 10rpx;
        }
        
        .upload-images {
            display: flex;
            flex-wrap: wrap;
            gap: 20rpx;
            
            .image-item, .upload-btn {
                width: 200rpx;
                height: 200rpx;
                border-radius: 12rpx;
                overflow: hidden;
            }
            
            .image-item {
                position: relative;
                
                image {
                    width: 100%;
                    height: 100%;
                }
                
                .delete-btn {
                    position: absolute;
                    right: 10rpx;
                    top: 10rpx;
                    width: 40rpx;
                    height: 40rpx;
                    background: rgba(0,0,0,0.5);
                    border-radius: 20rpx;
                    color: #fff;
                    font-size: 32rpx;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }
            
            .upload-btn {
                background: #f5f5f5;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                
                image {
                    width: 48rpx;
                    height: 48rpx;
                    margin-bottom: 10rpx;
                }
                
                text {
                    font-size: 24rpx;
                    color: #999;
                }
            }
        }
        
        .contact-input {
            background: #f5f5f5;
            border-radius: 12rpx;
            padding: 20rpx;
            
            input {
                width: 100%;
                height: 40rpx;
                font-size: 28rpx;
            }
        }
    }
    
    .submit-section {
        padding: 40rpx 30rpx;
        
        .submit-btn {
            width: 100%;
            height: 88rpx;
            line-height: 88rpx;
            background: #07c160;
            color: #fff;
            font-size: 32rpx;
            border-radius: 44rpx;
            
            &[disabled] {
                background: #ccc;
            }
        }
    }
    
    .tips {
        padding: 0 30rpx;
        
        .tip-item {
            font-size: 24rpx;
            color: #999;
            margin-bottom: 10rpx;
        }
    }
}
</style> 